<template>
  <div>
    <div>
      <span>来自于：</span>
      <!-- 下拉菜单要绑定在select上 -->
      <select v-model="from">
        <option value="北京市">北京</option>
        <option value="南京市">南京</option>
        <option value="天津市">天津</option>
      </select>
    </div>
    <div>
      <!-- 遇到复选框，v-model的变量值：
        非数组：关联的是复选框的checked属性
        数组：关联的是复选框的value属性
      -->
      <span>爱好：</span>
      <input type="checkbox" name="hobby" value="抽烟" v-model="hobby" />抽烟
      <input type="checkbox" name="hobby" value="喝酒" v-model="hobby" />喝酒
      <input type="checkbox" name="hobby" value="烫头" v-model="hobby" />烫头
    </div>

    <div>
      <span>性别：</span>
      <input type="radio" name="sex" value="男" v-model="sex" />男
      <input type="radio" name="sex" value="女" v-model="sex" />女
    </div>
    <div>
      <span>自我介绍</span>
      <textarea v-model="content"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      from: "",
      hobby: [],
      sex: "男",
      content: "",
    };
  },
};
</script>

<style>
</style>